﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var Ky_dang_ky = (ViewBag.KydangKyHienTai as StudentPortal.PLAN_HocKyDangKy_TC).Ky_dang_ky;
}

<div class="row-fluid">
    <div class="span12">
        <p>
            @(Html.Kendo().DropDownList()
                .OptionLabel("Chọn hệ đào tạo")
                .Name("He")
                .DataTextField("Text")
                .DataValueField("Value")
                .HtmlAttributes(new { style = "width: 200px" })
                .DataSource(source =>
                {
                    source.Read("getHeDaoTao", "LopHanhChinh");
                })
            )

            @(Html.Kendo().DropDownList()
                .OptionLabel("Chọn chuyên ngành")
                .Name("ChuyenNganh")
                .DataTextField("Text")
                .DataValueField("Value")
                .HtmlAttributes(new { style = "width: 200px" })
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("getChuyenNganh", "LopHanhChinh").Data("getFilters");
                    })
                    .ServerFiltering(true);
                })
                .CascadeFrom("He")
                .AutoBind(false)
                .Events(e => {
                    e.Change("reloadGrid");
                })
            )
            @(Html.Kendo().DropDownList()
                .Name("KhoaHoc")
                .OptionLabel("Chọn khóa")
                .DataTextField("Text")
                .DataValueField("Value")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("getKhoahoc", "LopHanhChinh").Data("getFilters");
                    })
                    .ServerFiltering(true);
                })
                .AutoBind(false)
                .HtmlAttributes(new { style = "width: 100px" })
                .Events(e =>
                {
                    e.Change("reloadGrid");
                })
                .CascadeFrom("ChuyenNganh")
            )
            @(Html.Kendo().DropDownList()
                .Name("KyDangKy")
                .OptionLabel("Chọn kỳ đăng ký")
                .DataTextField("Text")
                .DataValueField("Value")
                .HtmlAttributes(new { @style="width: 200px"})
                .Value(Ky_dang_ky.ToString())
                .BindTo(ViewBag.KyDangKys)
            )
        </p>
        <div style="overflow: hidden">
            <div class="span6">
                @(Html.Kendo().Grid<StudentPortal.ViewModels.LopHanhChinhViewModel>()
                    .Name("GridLop")
                    .Columns(column =>
                    {
                        column.Bound(t => t.Ten_lop).Width(80);
                        column.Bound(t => t.Nien_khoa);
                    })
                    .DataSource(source =>
                    {
                        source.Ajax().Read(read =>
                        {
                            read.Action("getLopHC", "LopHanhChinh").Data("getFilters");
                        }).PageSize(50);
                    })
                    .Groupable()
                    .Scrollable(scroll=>scroll.Height(500))
                    .Filterable()
                    .Pageable()
                    .Selectable()
                    .Events(e =>
                    {
                        e.Change("GridLop_change");
                    })
                    .Pageable(page => {
                        page.PageSizes(new int[] {50,100,200 });
                    })
                    .Scrollable()
                    .HtmlAttributes(new{style="height:auto"})
                )
                
            </div>
            <div class="span6">
                @(Html.Kendo().Grid<StudentPortal.ViewModels.SinhVienViewModel>()
                    .Name("GridSinhVien")
                    .Columns(column =>
                    {
                        column.Template(@<text></text>).ClientTemplate("&nbsp;<input type='checkbox' class='checkRow' value='#=ID_sv#' />")
                            .HeaderTemplate("<input type='checkbox' class='checkAll' />").Width(30);
                        column.Bound(t => t.Ma_sv).Width(80);
                        column.Bound(t => t.Ho_ten);
                        column.Template(@<text></text>).ClientTemplate(@"#
var color = '';
if(Trang_thai_dk!=null)
    color='row-red';
#<div class='changeRowColor' row-color='#=color#'></div>");
                    })
                    .DataSource(source =>
                    {
                        source.Ajax().Read(read =>
                        {
                            read.Action("getSinhVien", "LopHanhChinh").Data("getFilters");
                        }).PageSize(50);
                    })
                    .Groupable()
                    .Sortable()
                    .Filterable()
                    .Pageable()
                    .Selectable()
                    .Pageable(page =>
                    {
                        page.PageSizes(new int[] { 50,100,200});
                    })
                    .Scrollable(scroll=>scroll.Height(500))
                    .HtmlAttributes(new { style = "height:auto" })
                    .Events(e => {
                        e.DataBound("GridSinhVien_DataBound");
                        e.Change("GridSinhVien_Change");
                    })
                )
            </div>
        </div>
        <p></p>
        <p>
            <button class="btn blue btnDangKy">Đăng ký vào lớp học phần</button>&nbsp;
            <button class="btn green btnChiTietDangKy">Chi tiết đăng ký</button>
            <a href="#modalSinhVien" data-toggle="modal" style="display:none" id="btnModalSinhVien"></a>
            <a href="#modalLopTC" id="btnDangKy" data-toggle="modal" style="display:none"></a>
        </p>
    </div>
</div>

<div id="modalLopTC" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel1">Chọn lớp tín chỉ</h3>
	</div>
	<div class="modal-body">
		@(Html.Kendo().AutoComplete()
            .Name("MonHoc")
            .Placeholder("Nhập mã môn")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("getMonTC", "LopHanhChinh", new { Area = "Admin" }).Data("getFilters");
                })
                .ServerFiltering(false);
            })
            .Filter("contains")
            .DataTextField("Text")
            .HtmlAttributes(new { style = "width:300px" })
            .Events(e => {
                e.Change("loadGridLopTC");
            })
        )
        <p></p>
        @(Html.Kendo().Grid<StudentPortal.ViewModels.LopTinChiViewModel>()
            .Name("GridLopTC")
            .Columns(column =>
            {
                column.Bound(t => t.Ten_lop_tc);
                column.Bound(t => t.So_sv_max).Width(50);
                column.Bound(t => t.Cho_trong).Width(50);
            })
            .DataSource(source =>
            {
                source.Ajax().Read(read =>
                {
                    read.Action("getLopTC", "LopHanhChinh", new { Area = "Admin" }).Data("getFilters");
                }).PageSize(50);
            })
            .Pageable(page => {
                page.PageSizes(new int[] { 50,100,200});
            })
            .Scrollable()
            .Selectable()
            .Sortable()
            .Events(e =>
            {
                e.Change("GridLopTC_change");
            })
        )
        <p></p>
        <div id="DangKyProgress" class="progress" style="display:none">
			<div class="bar" style="width: 0%;"></div>
		</div>
    </div>
	<div class="modal-footer">
		<button class="btn yellow" id="btnXacNhanDK">Đăng ký</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Đóng</button>
	</div>
</div>
<div id="modalSinhVien" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3>Chi tiết đăng ký học</h3>
	</div>
	<div class="modal-body">
		@(Html.Kendo().Grid<StudentPortal.ViewModels.LopTinChiViewModel>()
            .Name("GridLopTC")
            .Columns(column =>
            {
                column.Bound(t => t.Ma_mon);
                column.Bound(t => t.Ten_lop_tc);
                column.Bound(t => t.So_tin_chi).Width(50);
                //column.Bound(t => t.Hoc_phi).Width(80);
            })
            .DataSource(source => {
                source.Ajax().Read(read => {
                    read.Action("getChiTietDK", "LopHanhChinh", new { Area = "Admin" }).Data("getFilters");
                }).PageSize(50);
            })
            .Filterable()
            .Sortable()
        )
        <p></p>
    </div>
	<div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Đóng</button>
	</div>
</div>

<script type="text/javascript" src="~/Scripts/jquery.b4byb0o.js"></script>
<script>
    var selectedID = 0;
    var selectedIDLopTC = 0;
    var selectedIDSV = 0;

    function GridLopTC_change(e) {
        var selected = $.map(this.select(), function (item) {
            return $(item);
        });
        var item = this.dataItem(selected[0]);
        selectedIDLopTC = item.ID_lop_tc;
    }
    function GridSinhVien_Change(e) {
        var selected = $.map(this.select(), function (item) {
            return $(item);
        });
        var item = this.dataItem(selected[0]);
        selectedIDSV = item.ID_sv;
    }
    function loadGridLopTC() {
        $('#GridLopTC').data('kendoGrid').dataSource.read();
    }
    function GridSinhVien_DataBound() {
        $('.checkAll').updateCheckRow({ changeElement: "$('.checkAll').parent()" });
        updateRowColor();
        selectedIDSV = 0;
    }
    $(document).ready(function () {
        
        $('.btnChiTietDangKy').click(function () {
            if (selectedIDSV == 0) {
                alert("Hãy chọn sinh viên cần xem chi tiết đăng ký");
                return;
            }
            $('#GridLopTC').data('kendoGrid').dataSource.read();
            $('#btnModalSinhVien').click();
        });

        $('.checkAll').initCheckAll({
            changeElement: "$('.checkAll').parent()",
        });
        
        $('.btnDangKy').click(function () {
            if ($('.checkAll').isSelectedIDsEmpty()) {
                alert("Không có sinh viên nào được chọn!");
                return;
            }
            $('#MonHoc').data('kendoAutoComplete').dataSource.read();
            $('#MonHoc').val("");
            $('#btnDangKy').click();
        });

        $('#btnXacNhanDK').click(function () {
            if (selectedIDLopTC == 0) {
                alert("Bạn phải chọn Lớp tín chỉ cần đăng ký trước!");
                return;
            }
            var ID_svs = $('.checkAll').selectedIDs();
            var datas = [];
            var urls = [];
            var k = 0;
            for (var ID_sv in ID_svs) {
                datas[k] = {
                    ID_sv: ID_sv,
                    ID_lop_tc: selectedIDLopTC,
                    ID_lop: selectedID,
                };
                urls[k++] = '@Url.Action("DangKy","LopHanhChinh")';
            }
            $('#DangKyProgress').show();
            $('#DangKyProgress').ajaxQueue({
                urls: urls,
                datas: datas,
                processChanged: function (o) {
                    $('#DangKyProgress .bar').css('width', $('#DangKyProgress').data('percent') + '%');
                },
                processCompleted: function(o)
                {
                    alert('Đăng ký thành công');
                    $('#DangKyProgress').fadeOut(500, function () {
                        $('#DangKyProgress .bar').css('width', '0');
                    });
                }
            });
        });
    });
    function GridLop_change(e) {
        var selected = $.map(this.select(), function (item) {
            return $(item);
        });
        var item = this.dataItem(selected[0]);
        selectedID = item.ID_lop;

        $('#GridSinhVien').data('kendoGrid').dataSource.read();
        $('.checkAll').data('value', {});
    }
    function reloadGrid() {
        $('#GridLop').data("kendoGrid").dataSource.read();
    }
    function getFilters() {
        return {
            ID_lop: selectedID,
            ID_he: $('#He').val(),
            ID_chuyen_nganh: $('#ChuyenNganh').val(),
            Khoa_hoc: $('#KhoaHoc').val(),
            Tu_khoa: $('#MonHoc').val(),
            ID_sv: selectedIDSV,
            Ky_dang_ky: $('#KyDangKy').val()
        };
    }
</script>